<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="../css/main.css" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#allmap{border: 1px solid #a9a6a6}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RFSysGOzwStwCVzqeYwwILRmb57e7VwO"></script>
	<!-- 请勿窃取个人秘钥，如有人乱用本人秘钥，与本人无关 -->
	<title>设置点的新图标</title>
</head>
<body>
	<div id="allmap"></div>
	<div class="map_table">
		<table>
			<thead><tr><td colspan="6">站点信息</td></tr></thead>
			<tbody>
			<tr>
				<th>站点</th>
				<th>名称</th>
				<th>总柱</th>
				<th>总车</th>
				<th>故障</th>
				<th>电压</th>
			</tr>
			<tr>
				<td>1</td>
				<td>天安门广场</td>
				<td>20</td>
				<td>6</td>
				<td>0</td>
				<td>12.6V</td>
			</tr>
			<tr>
				<td>2</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>3</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>4</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>5</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>6</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>7</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>8</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>9</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>10</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>11</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>12</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>13</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>14</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>15</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>
			<tr>
				<td>15</td>
				<td>圆明园</td>
				<td>18</td>
				<td>7</td>
				<td>1</td>
				<td>11.8V</td>
			</tr>

			</tbody>
		</table>
		<a href="javascript:void(0)" class="open"> > </a>
	</div>
    <script src="../js/jquery.min.js"></script>
</body>
</html>
<script type="text/javascript">
	// 地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.360, 39.920);
	map.centerAndZoom(point, 15);
	// 这是第五个
	var point5 = new BMap.Point(116.417, 39.911);    //这个要和下面的有点区别，不然的话框显示不到对应的地点
	//创建图标
	var pt5 = new BMap.Point(116.417, 39.911);
	var myIcon = new BMap.Icon("../img/index_btn5.png", new BMap.Size(80,80));
	var marker5 = new BMap.Marker(pt5,{icon:myIcon});  // 创建标注
	map.addOverlay(marker5);              // 将标注添加到地图中
  	var opts = {
	  width : 80,     // 信息窗口宽度
	  height: 220,     // 信息窗口高度
	  title : "海底捞王府井店" , // 信息窗口标题
	  enableMessage:true,//设置允许信息窗发送短息
	  message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
	}
	var infoWindow5 = new BMap.InfoWindow("<br/><ul><li>名称：亲亲家园</li><li>锁住数量：18</li><li>停放率：45%</li><li>可用车辆数量：7</li><li>故障：1</li><li>电压：11.8V</li><li>温度：38.0℃</li><li>地址：人民医院</li></ul>", opts);  // 创建信息窗口对象 
	marker5.addEventListener("click", function(){          
		map.openInfoWindow(infoWindow5,point5); //开启信息窗口
	});
	// 这是第二个
	var point2 = new BMap.Point(116.4, 39.909);    //这个要和下面的有点区别，不然的话框显示不到对应的地点
	//创建图标
	var pt2 = new BMap.Point(116.4, 39.909);
	//size表示可点击区域的大小
	var myIcon = new BMap.Icon("../img/index_btn5.png", new BMap.Size(80,80));
	var marker2 = new BMap.Marker(pt2,{icon:myIcon});  // 创建标注
	map.addOverlay(marker2);              // 将标注添加到地图中
  	var opts = {
	  width : 80,     // 信息窗口宽度
	  height: 220,     // 信息窗口高度
	  title : "海底捞王府井店" , // 信息窗口标题
	  enableMessage:true,//设置允许信息窗发送短息
	  message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
	}
	var infoWindow2 = new BMap.InfoWindow("<br/><ul><li>名称：亲亲家园</li><li>锁住数量：18</li><li>停放率：45%</li><li>可用车辆数量：7</li><li>故障：1</li><li>电压：11.8V</li><li>温度：38.0℃</li><li>地址：人民医院</li></ul>", opts);  // 创建信息窗口对象 
	marker2.addEventListener("click", function(){          
		map.openInfoWindow(infoWindow2,point2); //开启信息窗口
	});


	// 添加比例尺和缩放
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
	var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
	/*缩放控件type有四种类型:
	BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
	
	//添加控件和比例尺
	function add_control(){
		map.addControl(top_left_control);        
		map.addControl(top_left_navigation);     
		map.addControl(top_right_navigation);    
	}
	add_control();

	//打开和关闭左侧表格
	$(".map_table .open").click(function () {
		if ($(this).siblings('table').is(':hidden')){
			$(".map_table table").show(500);
			$(this).animate({"left":480},500);

		}else{
			$(".map_table table").hide(500);
		$(this).animate({"left":0},500);
		}
		
	})
</script>

